<!--
 * @Author: Olivia
 * @Date: 2022-08-24 22:20:19
 * @custom_string_Olivia: Less is more
-->
<template>
 <div class="search-history">
    <van-cell title="历史记录">
        <template v-if="isDeleteShow">
            <span @click="$emit('clear-search-history')">全部删除</span>
            &nbsp;
            <span @click="isDeleteShow = false">完成</span>
        </template>
        <van-icon v-else name="delete-o" @click="isDeleteShow = true"/>
    </van-cell>
    <van-cell
        :title="item"
        v-for="(item, index) in searchHistories" :key="index"
        @click="onSearch(item, index)"
        >
        <van-icon v-show="isDeleteShow" name="close" @click="searchHistories.splice(index,1)"/>
    </van-cell>
 </div>
</template>
<script>
export default {
  name: 'searchHistory',
  data () {
    return {
      isDeleteShow: false
    }
  },
  props: {
    searchHistories: {
      type: Array,
      required: true
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    onSearch (item, index) {
      // 如果是删除状态，则执行删除操作
      if (this.isDeleteShow) {
        this.searchHistories.splice(index, 1)
      } else {
        this.$emit('search', item)
      }
    }
  }
}
</script>
<style lang='less'  scoped>

</style>
